<template>
	<div class="back_contain_n">
		<div class="Search_Top_Part">
            <div class="search_list" >
                <div>
                    <div class="input_flex daterange">
                        <el-date-picker v-model="selectTime"
										type="daterange"
										range-separator="-"
										start-placeholder="开始日期"
										end-placeholder="结束日期">
						</el-date-picker>
						<!-- <el-input clearable v-model="params.reportingTime" placeholder="报修时间"></el-input> -->
                    </div>
                    <div class="input_flex">
						<el-input clearable v-model="params.procedures" placeholder="工段工序"></el-input>
                    </div>
                    <div class="input_flex">
						<el-input clearable v-model="params.equipmentNumber" placeholder="设备号/名称"></el-input>
                    </div>
                    <div class="input_flex">
                        <el-select clearable v-model="params.status" placeholder="状态">
                            <el-option label="待受理" value="0"></el-option>
                            <el-option label="维修中" value="1"></el-option>
                            <el-option label="已完成" value="2"></el-option>
                            <el-option label="已取消" value="3"></el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="search_bt">
                <span class="zll-search" @click="getList">搜索</span>
                <span class="zll-search-reset" @click="searchReset()">重置</span>
            </div>
        </div>
        <div>
            <sys-table class="m_table"
				   ref="systable"
				   :isMultipleSelection="false"
				   :tableData="tableData"
				   :tableLoading="tableLoading"
				   :tableHeader="tableHeader"
				   :scopeWidth="120"
				   :backCount="backCount"
				   @getBackData="getList">
				<template slot-scope="scope" slot="operate">
					<el-button @click="checkInfo(scope.row)" type="text" size="small">查看</el-button>
					<!-- <el-button @click="cancel(scope.row)" type="text" size="small">编辑</el-button> -->
				</template>
			</sys-table>
        </div>
		<div class="zll-dialog">
			<popout :title="'详细信息'" v-if="infoDialog" :visible.sync="infoDialog" class="largeSize">
				<info slot="content" ref="infoTemplate" :data="info" :status="viewType" :type="isEdit" @backSumbit="cloeseInfo"></info>
				<template slot="bottom">
					<div>
						<p class="zll-botton Info" @click="infoDialog = false">关 闭</p>
						<p class="zll-botton" v-if="isEdit" @click="()=>{this.$refs.infoTemplate.submitForm()}">提 交</p>
					</div>
				</template>
			</popout>
		</div>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
			<div>
				<el-form :model="formCancel" :rules="rules" ref="formCancel">
					<el-form-item label="取消原因" prop="cancelReason" label-width="120px">
					<el-input v-model="formCancel.cancelReason"></el-input>
						</el-form-item>
					<el-form-item label="取消人" label-width="120px">
						<el-input v-model="formCancel.cancelName" disabled></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false;formCancel.cancelReason=''">取 消</el-button>
				<el-button type="primary" @click="confirm">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import info from './info.vue';
import {formatDate} from "@/plugins/formatDate";

	export default {
		components: {
			info	
		},
		data() {
			return {
				viewType: '0',
				paramList: [
					{name: "报修任务", key: '0',num:0},
					{name: "维修中", key: '1',num:0},
					{name: "已完成", key: '2',num:0},
					{name: "已取消", key: '3',num:0},
				],
                // 表格数据
                tableData:[],
                tableLoading:true,
                tableHeader:[],
				backCount: 0,
                params:{
                    startTime:'',
                    endTime:'',
                    procedures: '',
                    equipmentNumber: '',
                    startIndex: 0,
					totalPage: 10,
                    status: '',
                },
				infoDialog:false,
				info:{},
				dialogVisible:false,
				formCancel:{},
				rules:{
					cancelReason:[
						{ required: true, message: '请输入取消原因', trigger: 'blur' },
						{ max: 50, message: '长度最多50个字符', trigger: 'blur' }
					]
				},
				isEdit:false,
                selectTime:[]
			}
		},
        mounted() {
            this.getList();
        },
		methods: {
            getList(startIndex, pageRow){
                let self = this;
				self.tableLoading = true;
                console.log("this.params", this.params)
                if (this.selectTime && this.selectTime.length == 2) {
					//date类型
                    this.params.startTime = formatDate(new Date(this.selectTime[0]), 'yyyy-MM-dd');
                    this.params.endTime = formatDate(new Date(this.selectTime[1]), 'yyyy-MM-dd') + ' 23:59:59';
				} else {
					this.params.startTime = ''
					this.params.endTime = ''
				}
                let pageInfo = self.$refs.systable.getPageInfo(startIndex);
				if (pageInfo.pageNum == 0||startIndex == 0) {
					self.$refs.systable.resetPage();
				}
                // return;
                console.log("pageInfo", pageInfo);
				self.params.startIndex = pageInfo.pageNum;
				self.params.totalPage = pageInfo.pageSize;
				let param = Object.assign({}, self.params);
                console.log("param", param);
                self.$http({
					url: "/jinl/repairReport/getRepairReportList",
					method: "post",
					data: JSON.stringify(param),
					dataType: 'json',
					contentType: "application/json",
				}).then(resp => {
					if (resp.success) {
						self.tableLoading = false;
						if(this.viewType == "0"){
							self.tableData = resp.result.map(res=>{
								return {
									...res,
									statusName:this.getState(res.status),
									reportingTime: this.getTime(res.reportingTime)
								}
							});
						}else if(this.viewType == "1"){
							self.tableData = resp.result.map(res=>{
								return {
									...res,
									statusName:this.getState(res.status),
									reportingTime: this.getTime(res.reportingTime),
									acceptanceTime: this.getTime(res.acceptanceTime),
								}
							});
						}else if(this.viewType == "2"){
							self.tableData = resp.result.map(res=>{
								return {
									...res,
									statusName:this.getState(res.status),
									reportingTime: this.getTime(res.reportingTime),
									acceptanceTime: this.getTime(res.acceptanceTime),
									completionTime: this.getTime(res.completionTime),
								}
							});
						}else if(this.viewType == "3"){
							self.tableData = resp.result.map(res=>{
								return {
									...res,
									statusName:this.getState(res.status),
									reportingTime: this.getTime(res.reportingTime),
									acceptanceTime: this.getTime(res.acceptanceTime),
									completionTime: this.getTime(res.completionTime),
								}
							});
						}
						
						self.tableHeader = [
							{"columnValue": "reportingTime", "columnName": "报修日期"},
							{"columnValue": "procedures", "columnName": "工段工序"},
							{"columnValue": "equipmentName", "columnName": "设备号"},
							{"columnValue": "equipmentNumber", "columnName": "设备名称"},
							{"columnValue": "faultDescription", "columnName": "故障描述"},
							{"columnValue": "repairName", "columnName": "报修人"},
							{"columnValue": "statusName", "columnName": "状态"},
							{"columnValue": "cancelReason", "columnName": "取消原因"},
							{"columnValue": "cancelName", "columnName": "取消人"},
						];
						if (resp.result.length > 0) {
							self.backCount = resp.result[0].count;
						} else {
							self.backCount = 0;
						}
						if(self.viewType == '0'){
							self.paramList[0].num = self.backCount;
						}
					}
				});
            },
			searchReset(){
				this.selectTime = [];
				this.params = {
					startTime:'',
                    endTime:'',
                    procedures: '',
                    equipmentNumber: '',
                    startIndex: 0,
					totalPage: 10,
                    status: '',
				};

				this.getList();
			},
            checkInfo(e){
                console.log("e", e);
				this.info = e;
				this.isEdit = false;
                this.viewType = e.status;
                this.infoDialog = true;
            },
			getTime(time) {
				var date = new Date(time);
				var y = date.getFullYear();
				var m = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				var d = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
				var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours());
				var M = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
				var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
				return y + '-' + m + '-' + d + " " + h + ":" + M 
			},
			cancel(e){
				this.dialogVisible = true;
				let userInfo = JSON.parse(sessionStorage.getItem("loginFlag"));
				this.formCancel.cancelName = userInfo.userName;
				this.formCancel.id = e.id;
				// console.log("userInfo", userInfo);
				// self.$http({
				// 	url: "/jinl/repairReport/cancelReport",
				// 	method: "post",
                //     data: JSON.stringify({cancelReason:'',cancelName:''}),
				// 	dataType: 'json',
				// 	contentType: "application/json",
				// }).then(resp => {
				// 	console.log();
				// })
			},
			confirm(){
				let self = this;
				this.$refs.formCancel.validate((valid) => {
				if (valid) {
					console.log("submit")
					self.$http({
						url: "/jinl/repairReport/cancelReport",
						method: "post",
						data: JSON.stringify(this.formCancel),
						dataType: 'json',
						contentType: "application/json",
					}).then(resp => {
						if(resp.success){
							this.$message({
								message: '取消成功！',
								type: 'success'
							});
							this.dialogVisible = false;
							this.getList();
						}
					})
				} else {
					return false;
				}
				});
				
			},
			getState(val){
				if(val == 0){
					return "待受理"
				}else if(val == 1){
					return "维修中"
				}else if(val == 2){
					return "已完成"
				}else if(val == 3){
					return "已取消"
				}else{
					return "未知"
				}
			},
			cloeseInfo(){
				this.infoDialog = false;
				this.getList();
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/style/SearchTop.scss";

	.leftList {
		display: flex;
		margin-bottom: 15px;

		li {
			list-style: none;
			width: 100px;
			height: 30px;
			line-height: 28px;
			border-bottom: 1px solid #fff;
			color: #333;
			text-align: center;
			cursor: pointer;
			margin-bottom: 10px;
			transition: all .5s;
			position: relative;
			display: flex;
			justify-content: center;

			&.active {
				color: #ff9935;
				border-color: #ff9935;
				position: relative;
				font-weight: 600;
				font-size: 14px;
			}

			.nums {
				position: absolute;
				right: 5px;
				top: 0;
				background: #f44336;
				color: #fff;
				height: 16px;
				line-height: 16px;
				font-weight: 400;
				border-radius: 8px;
				font-size: 12px;
				padding: 0 5px;
			}
		}
	}
</style>